﻿@model System.String

@Html.LabelFor(Model => Model) 
@Html.TextBoxFor(Model => Model, new { @class = "txtbox-long" })
<span class="light-grey">seperate tags with spaces</span>

@Html.Resource(@<link href="@Url.Content("~/Content/CSS/Shared/flick/jquery-ui-1.8.11.css")" rel="stylesheet" type="text/css" />, "css")
@Html.Resource(@<script src="@Url.Content("~/Content/JS/jquery-ui-1.8.11.min.js")" type="text/javascript" language="javascript"></script>, "js")
@Html.Resource(
    @<script type="text/javascript" language="javascript">
         $(document).ready(function () {
             var tags; $.getJSON("/Thread/GetTags", function (data) { tags = data; });

             function split(val) { return val.split(/ \s*/); }
             function extractLast(term) { return split(term).pop(); }

             $("#Tags")
             // don't navigate away from the field on tab when selecting an item
                .bind("keydown", function (event) {
                    if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) event.preventDefault();
                })
                .autocomplete({
                    delay: 0,
                    minLength: 0,
                    source: function (request, response) {
                        response($.ui.autocomplete.filter(tags, extractLast(request.term)));
                    },
                    focus: function () {
                        // prevent value inserted on focus
                        return false;
                    },
                    select: function (event, ui) {
                        var terms = split(this.value);
                        // remove the current input
                        terms.pop();
                        // add the selected item
                        terms.push(ui.item.value);
                        // add placeholder to get the space at the end
                        terms.push("");
                        this.value = terms.join(" ");

                        return false;
                    }
                });
         });
    </script>
, "js")